<template>
  <div class="tableContainer" ref="wrapper">
    <div ref="header" class="drag-bar-header">
      <span>{{ listName }}列表</span>
      <div class="" @click="close">×</div>
    </div>
    <el-table
      :data="tableData"
      height="380"
      :header-cell-style="tableHeaderColor"
    >
      <el-table-column fixed prop="index" label="序号" width="90" />
      <el-table-column prop="name" label="类别" width="150" />
      <el-table-column prop="address" label="名称" width="400" />
      <el-table-column label="定位" width="130">
        <template #default="scope">
          <img :src="scope.row.go" height="30" class="img" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
/*eslint-disable */
import pubsub from "pubsub-js";
import { getCurrentInstance, onMounted } from "vue-demi";

export default {
  name: "facilityTable",
  data() {
    return {
      listName: "",
      data: [],
      tableData: [],
      tableHeight: 150,
      addressWidth: 150,
      wrapperDom: null,
      headerDom: null,
      disX: 0,
      disY: 0,
      minLeft: 0,
      maxLeft: 0,
      minTop: 0,
      maxTop: 0,
      prevLeft: 0,
      prevTop: 0,
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    let subList = [];

    onMounted(() => {
      subList[0] = pubsub.subscribe("facilityTable", (n, data) => {
        proxy.data = data;
        // 设置表格样式
        setTableStyle(data);
        // 填入表内容
        let inputList = [];
        let index = 0;
        data.forEach((element) => {
          inputList.push({
            name: element.LB,
            address: element.MC,
            go: require("@/assets/设施场所icon/定位.png"),
            index: index,
          });
          index += 1;
        });
        proxy.timeStamp = new Date().getTime();
        proxy.tableData = inputList;
        proxy.listName = inputList[0].name;
        click();
      });
    });

    //表格样式设置
    function setTableStyle(data) {
      //地址格子长
      let lengthList = [];
      data.forEach((element) => {
        lengthList.push(Array.from(element.MC).length);
      });
      let max = 0;
      lengthList.forEach((l) => {
        if (l > max) max = l;
      });
      proxy.addressWidth = 18 * max;
      // el-table样式调整
      setTimeout(() => {
        Array.from(document.querySelectorAll("td")).forEach((e) => {
          e.style["backgroundColor"] = "rgba(0,0,0,0)";
          e.style["border-bottom"] = "rgb(100,100,100) 1px solid";
        });
        Array.from(
          document.querySelectorAll(".el-table th.el-table__cell")
        ).forEach((e) => {
          e.style["backgroundColor"] = "rgba(0,0,0,0)";
          e.style["border-bottom"] = "rgb(100,100,100) 1px solid";
        });
        Array.from(document.querySelectorAll(".el-table tr")).forEach((e) => {
          e.style["backgroundColor"] = "rgba(0,0,0,0)";
        });
        Array.from(document.querySelectorAll("th>.cell")).forEach((e) => {
          e.style["color"] = "#1296db";
        });
        Array.from(document.querySelectorAll("td>.cell")).forEach((e) => {
          e.style["color"] = "white";
        });
        document.querySelector(".el-scrollbar__wrap--hidden-default").style[
          "backgroundColor"
        ] = "rgba(0,0,0,0)";
      }, 100);
    }

    //点击事件绑定
    function click() {
      setTimeout(() => {
        Array.from(document.querySelectorAll(".img")).forEach((e) => {
          e.addEventListener("click", () => {
            let index = Array.from(
              Array.from(
                event.target.parentNode.parentNode.parentNode.children
              )[0].children
            )[0].innerHTML.split(">")[1];
            let f = proxy.data[index];
            console.log(f);
            pubsub.publish("addOneFacility", f);
          });
        });
      }, 300);
    }

    //关闭设施场所表
    function close() {
      pubsub.publish("facilityTableShow", false);
    }

    return { close };
  },
  methods: {
    initDrag() {
      this.wrapperDom = this.$refs.wrapper;
      this.headerDom = this.$refs.header;
      this.headerDom.addEventListener("mousedown", this.onMousedown, false); //点击头部区域拖拽
    },
    onMousedown(e) {
      this.disX = e.clientX - this.headerDom.offsetLeft;
      this.disY = e.clientY - this.headerDom.offsetTop;

      this.minLeft = this.wrapperDom.offsetLeft;
      this.minTop = this.wrapperDom.offsetTop;

      this.maxLeft =
        window.innerWidth - this.minLeft - this.wrapperDom.offsetWidth;
      this.maxTop =
        window.innerHeight - this.minTop - this.wrapperDom.offsetHeight;

      const { left, top } = getComputedStyle(this.wrapperDom, false);
      this.prevLeft = parseFloat(left);
      this.prevTop = parseFloat(top);

      document.addEventListener("mousemove", this.onMousemove, false);
      document.addEventListener("mouseup", this.onMouseup, false);
      document.body.style.userSelect = "none"; //消除拖拽中选中文本干扰
    },
    onMousemove(e) {
      let left = e.clientX - this.disX;
      let top = e.clientY - this.disY;

      if (-left > this.minLeft) {
        left = -this.minLeft;
      } else if (left > this.maxLeft) {
        left = this.maxLeft;
      }

      if (-top > this.minTop) {
        top = -this.minTop;
      } else if (top > this.maxTop) {
        top = this.maxTop;
      }

      this.wrapperDom.style.left = this.prevLeft + left + "px";
      this.wrapperDom.style.top = this.prevTop + top + "px";
    },
    onMouseup() {
      document.removeEventListener("mousemove", this.onMousemove, false);
      document.removeEventListener("mouseup", this.onMouseup, false);
      document.body.style.userSelect = "auto"; //恢复文本可选中
    },
  },
  mounted() {
    this.initDrag();
  },
};
</script>

<style lang="less" scoped>
.tableContainer {
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  z-index: 10000;
  // border-top-right-radius: 24px;
  // border-bottom-left-radius: 12px;
  width: 770px;
  height: 420px;
  background-image: ~"url(@{app-images-root}/content_bg6.png)";
  background-size: 100% 100%;
  overflow: hidden;
}
.el-table {
  border-top: 1px transparent solid;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: transparent;
  // background-color: rgb(6, 19, 31);
}
.drag-bar-header {
  width: 7700px;
  background-image: ~"url(@{app-images-root}/content_bg7.png)";
  background-size: 100% 100%;
  height: 32px;
  > span {
    font-size: 150%;
    font-weight: bold;
    color: white;
    margin-left: 1.5%;
    position: relative;
    top: -5%;
    float: left;
  }
  > span::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -12px;
    width: 4px;
    height: 20px;
    background: #fddd60;
  }
  > div {
    outline: none;
    border: transparent;
    background-color: rgba(6, 19, 31, 0);
    color: white;
    height: 100%;
    position: absolute;
    right: 3%;
    top: -0.7%;
    font-size: 150%;
    display: inline;
  }
}
img:hover {
  cursor: pointer;
}
</style>